<template>
  <section class="todoapp">
  <to-header @add="addlist"></to-header>
  <to-main :list="list" @del="dellist"></to-main>
  <to-footer></to-footer>
  </section>
</template>

<script>
import ToFooter from './components/ToFooter.vue'
import ToHeader from './components/ToHeader.vue'
import ToMain from './components/ToMain.vue'
export default {
  components: { ToHeader, ToMain , ToFooter},
   data (){
      return {
        list: [
          { id: 12, name: '吃饭', isDone: false },
          { id: 14, name: '听歌', isDone: true },
          { id: 23, name: '洗澡', isDone: true },
          { id: 34, name: '睡觉', isDone: false },
          { id: 35, name: '游戏', isDone: false },
        ]
      }
    },
    methods:{
      dellist(id){
        this.list = this.list.filter(item => item.id !== id)
      },
      addlist(todu){
        this.list.unshift({
          id: +new Date(),
          name:todu,
          isDone:false
        })
      }
    }
}
</script>

   
<style></style>
